<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>:target</title>
	<style>
	:target {
	  box-shadow: 0 0 2px gray;
	}

	/* You can use pseudo-elements inside a target element */
	:target::before {
	  font: 70% sans-serif;
	  content: "►";
	  color: gray;
	  margin-right: .25em;
	}

	/* You can apply special styles to elements within a target element */
	:target i {
	  color: orange;
	}
	</style>
</head>
<body>
	<p>突出显示活动的 HTML 锚</p>

	<ol>
		<li><a href="#p1">Jump to the first paragraph!</a></li>
		<li><a href="#p2">Jump to the second paragraph!</a></li>
		<li><a href="#nowhere">This link goes nowhere,
		because the target doesn't exist.</a></li>
	</ol>

	<p id="p1">You can target <i>this paragraph</i> using a URL fragment. Click on the link above to try out!</p>

	<p id="p2">This is <i>another paragraph</i>, also accessible from the links above. Isn't that delightful?</p></pre>

	<h3 id="refer">参考</h3>
	<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:target">MOZ :target</a><br/>
	<a href="http://www.w3school.com.cn/cssref/selector_target.asp">Css3 :target</a>
</body>
</html>